require('../../less/controls/form_item.less');
var React = require('react');
var Input = require('./Input');
module.exports = React.createClass({
	displayName: 'FormItem',
	getInitialState:function(){
		return {
			hidden: this.props.hidden || false,
			status: '',
			tip: this.props.tip
		}
	},
	componentDidMount:function(){
		this.props.onFormItemDidMount && this.props.onFormItemDidMount(this);
	},
	validate: function (){
		return this.refs.input.validate();
	},
	getValue: function () {
		return this.refs.input._value;
	},
	tip: function (tip) {
		this.setState({ tip: tip });
	},
	hidden: function (hidden) {
		this.setState({
			hidden: hidden
		});
	},
	render:function(){
		var _hStyle = this.props.hStyle || {};
		_hStyle.width = this.props.hWidth;
		return (
			<div className={"c-form-item type-" + this.props.type + " " + (this.props.className||'') + " " + (this.state.status||'')} data-hidden={this.state.hidden||false}>
				{
					this.props.title && <label className="fi-label" style={_hStyle}>{this.props.title}</label>
				}
				<Input ref="input" parent={this} {...this.props} width={this.props.bWidth} style={this.props.bStyle} />
				{
					this.state.tip && <label className="fi-tip">{this.state.tip}</label>
				}
			</div>
		);
	}
});
